<script setup>
import { reactive, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import useLoginStore from '@/store/user/index.js'
import useDeptStore from '@/store/dept/index.js'

const loginStore = useLoginStore()
const deptStore = useDeptStore()
const { deptTree } = storeToRefs(deptStore)

//校验表单
const rules = reactive({
  parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
  orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
  label: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }]
})

//dialog显示
const dialogVisible = ref(false)

//添加表单
const addForm = reactive({
  id: '',
  deptId: '',
  deptName: '',
  orderNum: '',
  leader: '',
  phone: '',
  email: '',
  status: '0',
  label: '',
  value: '',
  parentId: ''
})

//校验规则
const formRef = ref()

//判断操作方法，true新增
const isNewOrUpdate = ref(true)
const isShow = ref(true) //控制上级部门显示
const isNewOrUpdateTitle = ref('添加部门')

//操作信息
const dialogConfirmBtn = async () => {
  //判断新增还是修改
  //新增，清除组件残留内容，检验表单
  if (isNewOrUpdate.value) {
    await formRef.value.validate()
    //保存信息
    await deptStore.addOrEditDept(addForm)
  } else {
    //修改
    await deptStore.addOrEditDept(addForm)
  }
  //刷新数据
  await deptStore.getDeptTreeAction()
  //关闭弹窗
  dialogVisible.value = false
  //清除表单内容
  formRef.value.resetFields()
}

//编辑回显信息
const dialogEditInfoBtn = (data) => {
  //显示上级部门
  if (data.parentId === 0) {
    isShow.value = false
  } else {
    isShow.value = true
  }
  //存储主键id
  addForm.deptId = data.value
  isNewOrUpdateTitle.value = '编辑部门'
  //调用接口展示角色信息
  Object.assign(addForm, data)
}

//关闭dialog清除信息
const removeDialog = ref(true)
const closeDialogBtn = () => {
  //清除校验信息
  formRef.value.resetFields()
  Object.assign(addForm, {
    id: '',
    deptId: '',
    deptName: '',
    orderNum: '',
    leader: '',
    phone: '',
    email: '',
    status: '0',
    label: '',
    value: '',
    parentId: ''
  })
}

//对外暴露方法
defineExpose({
  dialogVisible,
  dialogConfirmBtn,
  dialogEditInfoBtn,
  isNewOrUpdate,
  removeDialog,
  isShow
})
</script>

<template>
  <div class="dialog">
    <el-dialog
      v-if="removeDialog"
      @close="closeDialogBtn"
      v-model="dialogVisible"
      :title="isNewOrUpdateTitle"
      width="680px"
    >
      <el-form ref="formRef" :rules="rules" :model="addForm">
        <el-form-item v-if="isShow" label="上级部门" label-width="95px" prop="parentId">
          <el-tree-select
            check-strictly="true"
            clearable
            v-model="addForm.parentId"
            :data="deptTree"
          />
        </el-form-item>
        <el-form-item>
          <el-form-item label="部门名称" label-width="80px" prop="label">
            <el-input v-model="addForm.label" placeholder="请输入部门名称" />
          </el-form-item>
          <el-form-item label="显示排序" label-width="80px" prop="orderNum">
            <el-input v-model="addForm.orderNum" placeholder="请输入排序" />
          </el-form-item>
          <el-form-item label="负责人" label-width="80px">
            <el-input v-model="addForm.leader" placeholder="请输入负责人" />
          </el-form-item>
          <el-form-item label="联系电话" label-width="80px">
            <el-input v-model="addForm.phone" placeholder="请输入负责人" />
          </el-form-item>
          <el-form-item label="邮箱" label-width="80px">
            <el-input v-model="addForm.email" placeholder="请输入负责人" />
          </el-form-item>
          <el-form-item label="状态" label-width="80px">
            <el-select
              v-model="addForm.status"
              placeholder="请选择状态"
              size="large"
              style="width: 179px"
            >
              <el-option value="0" label="启用" />
              <el-option value="1" label="禁用" />
            </el-select>
          </el-form-item>
        </el-form-item>
      </el-form>
      <!--      底部-->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="dialogConfirmBtn"> 确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.dialog {
  .el-form {
    margin-top: 30px;
  }

  .el-form-item {
    font-weight: 700;
  }

  /* 去掉长分割线 */

  :deep(.el-tabs__nav-wrap::after) {
    position: static !important;
  }

  /* 去掉下划线 */

  :deep(.el-tabs__active-bar) {
    background-color: transparent !important;
  }

  .el-form-item {
    margin-left: 15px;
    margin-bottom: 20px;
  }
}
</style>
